<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<lv-form>
    <div class="aui-gutter-column-xl">
        <lv-group lvGutter="30px">
            <lv-group>
                <lv-form-column lvWidth="16%">
                    <ng-container *ngIf="
            source?.linkStatus === dataMap.resource_LinkStatus_Special.normal.value
          ">
                        <i lv-icon="aui-icon-detail-cluster" class="cluster-icon"></i>
                    </ng-container>
                    <ng-container *ngIf="
            source.linkStatus !== dataMap.resource_LinkStatus_Special.normal.value
          ">
                        <i lv-icon="aui-icon-summary-cluster-offline" class="cluster-icon"></i>
                    </ng-container>
                </lv-form-column>
            </lv-group>
            <lv-group lvDirection="vertical">
                <lv-group>
                    <lv-form-column *ngFor="let forms of firstformItems" lvWidth="40%">
                        <lv-form-item *ngFor="let item of forms">
                            <lv-form-label class="label">
                                {{ item.label | i18n }}
                            </lv-form-label>
                            <lv-form-control class="value">
                                <div lv-overflow style="width: 120px;">
                                    {{ item.value | nil }}
                                </div>
                            </lv-form-control>
                        </lv-form-item>
                    </lv-form-column>
                </lv-group>
                <lv-group>
                    <lv-form-column *ngFor="let forms of secondformItems">
                        <lv-form-item *ngFor="let item of forms">
                            <lv-form-label class="label">
                                {{ item.label | i18n }}
                            </lv-form-label>
                            <lv-form-control class="value">
                                <div>
                                    {{ item.value | nil }}
                                </div>
                            </lv-form-control>
                        </lv-form-item>
                    </lv-form-column>
                </lv-group>
            </lv-group>
        </lv-group>
    </div>

    <div class="aui-header-2 aui-gutter-column-md">
        <h2>{{ 'protection_data_node_label' | i18n }}</h2>
    </div>

    <div class="list-container">
        <lv-pro-table #dataTable [config]="tableConfig" [data]="tableData"></lv-pro-table>
    </div>
</lv-form>